<template>
  <div class="embodiment">
    <div class="printImg">
      <img src="@/assets/third/print.png" alt="">
    </div>
    <div class="addadvice">
      <div class="header">
        <div class="title">审查意见录入</div>
        <!--          <div class="export">-->
        <!--            <img src="../../../../assets/third/downloadlogo.png" />导出审查意见-->
        <!--          </div>-->
      </div>
      <div v-if="!showadd">
        <div class="menulist">
          <div class="item" @click="chooseTab(true)" :class="tabSwitch ? 'active':'' ">复审意见</div>
          <div class="item" @click="chooseTab(false)" :class="!tabSwitch ? 'active':'' ">初审意见</div>
          <div class="add" v-show="tabSwitch" @click="addadvice">新增</div>
          <div style="clear:both;"></div>
        </div>
        <div class="advicelist" v-show="tabSwitch">
          <div class="item">
            <div class="situation">
              <div class="msg" style="margin-top:0;">附件名称：实施方案</div>
              <div class="msg">问题描述：部分内容缺失</div>
              <div class="msg">修改情况：
                <el-radio v-model="radio" label="1">已修改</el-radio>
                <el-radio v-model="radio" label="2">未修改</el-radio>
              </div>
            </div>
            <div class="other">
              <div class="date">2018/10/03</div>
              <div class="delete">删除</div>
            </div>
          </div>
          <div class="item">
            <div class="situation">
              <div class="msg" style="margin-top:0;">附件名称：实施方案</div>
              <div class="msg">问题描述：部分内容缺失</div>
              <div class="msg">修改情况：
                <el-radio v-model="radio" label="1">已修改</el-radio>
                <el-radio v-model="radio" label="2">未修改</el-radio>
              </div>
            </div>
            <div class="other">
              <div class="date">2018/10/03</div>
              <div class="delete">删除</div>
            </div>
          </div>
          <div class="item">
            <div class="situation">
              <div class="msg" style="margin-top:0;">附件名称：实施方案</div>
              <div class="msg">问题描述：部分内容缺失</div>
              <div class="msg">修改情况：
                <el-radio v-model="radio" label="1">已修改</el-radio>
                <el-radio v-model="radio" label="2">未修改</el-radio>
              </div>
            </div>
            <div class="other">
              <div class="date">2018/10/03</div>
              <div class="delete">删除</div>
            </div>
          </div>
        </div>

        <div class="advicelist" v-show="!tabSwitch">
          <div class="item">
            <div class="situation">
              <div class="msg" style="margin-top:0;">附件名称：实施方案</div>
              <div class="msg">问题描述：部分内容缺失</div>
              <div class="msg">修改情况：已修改</div>
            </div>
            <div class="other">
              <div class="date">2018/10/03</div>
              <div class="delete">删除</div>
            </div>
          </div>
        </div>
      </div>

      <el-form v-if="showadd" class="reviewIdea" :model="form" label-width="80px" style="margin-top:30px;">
        <el-form-item label="附件名称" >
          <el-select placeholder="请选择" v-model="form.name">
            <el-option label="实施方案" value="实施方案"></el-option>
            <el-option label="踏勘选址报告" value="踏勘选址报告"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="问题描述">
          <el-input type="textarea" v-model="form.question" rows="4">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="showadd=false">取消</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                form:{
                    name:'',
                    question:'',
                },
                showadd:false,
                radio:"1",
                tabSwitch: true,
            };
        },
        methods: {
            onSubmit(){
                this.showadd = false;
            },
            addadvice(){
                this.showadd = true;
            },
            chooseTab (flag) {
                this.tabSwitch = flag
            }
        }
    }
</script>

<style lang="scss" scoped>
  .embodiment {
    display: flex;
    padding: 40px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .printImg{
      width:33%;
      overflow: hidden;
      border: 1px solid #E1E2E6;
      img{
        width: 100%;
        display: block;
      }
    }
    .addadvice{
      margin-left: 7%;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      .header{
        margin-top: 24px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        padding: 30px 30px 20px;
        border-bottom: 1px solid #e4e4e4;;
        .title{
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
          font-size:18px;
          font-family:PingFang SC;
          font-weight:bold;
          line-height:25px;
          color: #4d4d4d;
        }
        .export{
          font-size:14px;
          font-family:PingFang SC;
          font-weight:500;
          line-height:20px;
          color: #737373;
          img{
            width: 12px;
            margin-right: 3px;
          }
        }
      }
      .menulist{
        margin-top: 20px;
        .item{
          width:88px;
          height:36px;
          background: #ffffff;
          line-height: 36px;
          text-align: center;
          font-size:14px;
          font-family:PingFang SC;
          font-weight:500;
          color: #999999;
          margin-right: 8px;
          float: left;
          cursor: pointer;
          &.active{
            background: #EEF3F8;
            color: #1D88F3;
          }
        }
        .add{
          float: right;
          width:60px;
          height:28px;
          background:rgba(64,158,255,1);
          border-radius:2px;
          text-align: center;
          line-height: 28px;
          font-size:14px;
          font-family:PingFang SC;
          font-weight:500;
          color: #ffffff;
          margin-top: 4px;
          cursor: pointer;
          margin-right: 30px;
        }
      }
      .advicelist{
        margin-top: 10px;
        .item{
          padding: 20px 30px;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-align: center;
          border-bottom: 1px solid #e4e4e4;
          .situation{
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            .msg{
              margin-top: 10px;
              font-size:14px;
              font-family:PingFang SC;
              font-weight:500;
              line-height:20px;
              color: #8c8c8c;
            }
          }
          .other{
            text-align: right;
            .date{
              height:18px;
              font-size:13px;
              font-family:PingFang SC;
              font-weight:500;
              line-height:18px;
              color: #999999;
            }
            .delete{
              font-size:14px;
              font-family:PingFang SC;
              font-weight:500;
              line-height:20px;
              margin-top: 12px;
              color: #F92828;
              cursor: pointer;
            }
          }
        }
      }

      // form
      .reviewIdea {
        /deep/ .el-form-item__label {
          color: #8C8C8C;
          font-size: 14px;
        }
      }
    }
  }
</style>
